<template>
    <div class="head">
       <i class="iconfont back">&#xe6d8;</i>
       <div class="search-input">
           <i class="iconfont search">&#xe613;</i>
           <p>输入游玩的景点和城市</p>
       </div>
       <router-link tag="div" to="city" class="right">
           <p>城市</p>
           <i class="iconfont down">&#xe68f;</i>
       </router-link>
    </div>
</template>
<script>
export default {
    name:"HomeHead"
}
</script>
<style lang="scss" scoped>
@mixin padding-1r($pd){
    padding-left: $pd;
    padding-right: $pd;
}
.head{
    height: 88px;
    background: #03bbd5;
    display:flex;
    align-items:center;
}
.back{
    @include padding-1r(30px);
    color: #fff;
    font-size: 30px;
}
.search-input{
    display: flex;
    height: 66px;
    background: #fff;
    flex:1;
    align-items: center;
    color: rgb(168, 168, 167);
    border-radius: 15px;
    .search{
        font-size: 30px;
        @include padding-1r(20px);
    }
}
.right{
    display: flex;
   align-items: center;
   @include padding-1r(30px);
   color: #fff;
   .down{
       font-size: 36px;
   }
}
</style>
